<template>
	<view class="create-shop">
		<view class="page-header">
			<text class="header-title">创建商铺</text>
			<text class="header-desc" v-if="!hasApplied">填写以下信息开始您的商业之旅</text>
			<text class="header-desc" v-else-if="status === 3">您的商铺申请正在审核中</text>
			<text class="header-desc" v-else>恭喜您成功创建商铺</text>
		</view>

		<view class="content-box" :class="{'has-applied': hasApplied}">
			<view v-if="!hasApplied" class="form-section">
				<u-form :model="formData" :rules="rules" ref="uForm" :custom-style="{background: 'transparent'}" :error-type="['message']" label-position="left" label-width="160rpx">
					<view class="form-item-wrap">
						<u-form-item label="商城名称" prop="shopName">
							<u-input v-model="formData.shopName" placeholder="请输入商城名称"
								:custom-style="{background: '#f8f9fc', borderRadius: '8rpx', height: '88rpx'}" />
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="联系电话" prop="phone">
							<u-input v-model="formData.phone" placeholder="请输入联系电话"
								:custom-style="{background: '#f8f9fc', borderRadius: '8rpx', height: '88rpx'}" />
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="姓名" prop="name">
							<u-input v-model="formData.name" placeholder="请输入姓名"
								:custom-style="{background: '#f8f9fc', borderRadius: '8rpx', height: '88rpx'}" />
						</u-form-item>
					</view>
				</u-form>
				<view class="submit-btn">
					<u-button type="primary" @click="submitForm" :custom-style="{
						height: '88rpx',
						borderRadius: '44rpx',
						border: 'none',
						boxShadow: '0 10rpx 20rpx rgba(0,110,255,0.2)'
					}">提交申请</u-button>
				</view>
			</view>

			<view v-else-if="status === 3" class="shop-info">
				<view class="success-status">
					<view class="success-icon" style="background: rgba(250, 173, 20, 0.1);">
						<text class="iconfont icon-dengdaizhifu" style="color: #faad14;"></text>
					</view>
					<text class="success-title">审核中</text>
					<text class="success-subtitle">您的商铺申请已提交，正在审核中，请耐心等待</text>
				</view>
			</view>

			<view v-else class="shop-info">
				<view class="success-status">
					<view class="success-icon">
						<text class="iconfont icon-duihao2"></text>
					</view>
					<text class="success-title">申请成功</text>
					<text class="success-subtitle">您的商铺已经创建完成，请妥善保管以下登录信息</text>
				</view>
				<view class="info-card">
					<view class="info-item">
						<view class="label-wrap">
							<text class="label">后台登录地址</text>
							<text class="copy-btn" @click="copyText(shopInfo.loginUrl)">复制</text>
						</view>
						<text class="value">{{shopInfo.loginUrl}}</text>
					</view>
					<view class="info-item">
						<view class="label-wrap">
							<text class="label">登录账号</text>
							<text class="copy-btn" @click="copyText(shopInfo.account)">复制</text>
						</view>
						<text class="value">{{shopInfo.account}}</text>
					</view>
					<view class="info-item">
						<view class="label-wrap">
							<text class="label">初始密码</text>
							<text class="copy-btn" @click="copyText(shopInfo.password)">复制</text>
						</view>
						<text class="value">{{shopInfo.password}}</text>
					</view>
				</view>
				<view class="tips">
					<text class="tips-text">请妥善保管您的登录信息</text>
				</view>
			</view>
		</view>

		<!-- 添加客服联系方式 -->
		<view class="customer-service mt-10">
			<view class="service-content" @click="makePhoneCall">
				<text class="iconfont icon-kefu"></text>
				<text class="service-text">联系客服：</text>
				<text class="service-phone">15185541041</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cardStoreCreate,
		cardStoreDetail
	} from '@/api/extend.js'
	export default {
		data() {
			return {
				status: 0, //1审核通过 3审核中 0未申请
				hasApplied: false, // 是否已申请
				formData: {
					shopName: '',
					phone: '',
					name: ''
				},
				shopInfo: {
					loginUrl: '',
					account: '',
					password: ''
				},
				rules: {
					shopName: [{
						required: true,
						message: '请输入商城名称',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					}, {
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入正确的手机号码',
						trigger: ['blur', 'change']
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}, {
						min: 2,
						message: '姓名长度不能小于2个字符',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(options) {
			this.cardStoreDetailFunc();
			// if (options.mid) {
			// 	this.hasApplied = true
			// } else {
			// 	this.hasApplied = false
			// }
			
			// 确保表单组件已初始化
			this.$nextTick(() => {
				if (this.$refs.uForm) {
					this.$refs.uForm.setRules(this.rules);
				}
			});
		},
		methods: {
			cardStoreDetailFunc() {
				cardStoreDetail().then(res => {
					if (res.data && res.data.id) {
						this.hasApplied = true;
						this.shopInfo.loginUrl = res.data.login
						this.shopInfo.account = res.data.phone
						this.shopInfo.password = res.data.password

						this.status = res.data.status
					} else {
						this.hasApplied = false
					}
				})
			},
			// 提交表单
			async submitForm() {
				try {
					const valid = await this.$refs.uForm.validate();
					if (valid) {
						// 这里需要调用后端接口提交申请
						cardStoreCreate({
							name: this.formData.shopName,
							phone: this.formData.phone,
							user_name: this.formData.name
						}).then(res => {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							if (res.status == 200) {
								this.cardStoreDetailFunc();
							}
						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						})
					}
				} catch (error) {
					console.log('表单验证失败');
				}
			},

			// 复制文本
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			
			// 拨打电话
			makePhoneCall() {
				const phoneNumber = '15185541041';
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.create-shop {
		min-height: 100vh;
		background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 30%);
		padding: 40rpx 30rpx;

		.page-header {
			margin-bottom: 60rpx;
			padding: 20rpx 0;

			.header-title {
				font-size: 44rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 16rpx;
				display: block;
			}

			.header-desc {
				font-size: 28rpx;
				color: #666;
			}
		}

		.content-box {
			background: #fff;
			border-radius: 24rpx;
			padding: 40rpx 30rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);

			&.has-applied {
				text-align: center;
			}
		}

		.form-section {
			.form-item-wrap {
				margin-bottom: 30rpx;

				/deep/ .u-form-item {
					padding: 10rpx 0;

					.u-form-item__body {
						padding: 0;
					}

					.u-form-item__body__left__content {
						padding-right: 24rpx;
						color: #333;
						font-size: 28rpx;
					}

					.u-input {
						padding: 0 24rpx;
					}
				}
			}
		}

		.submit-btn {
			margin-top: 60rpx;
			padding: 0 20rpx;
		}

		.shop-info {
			.success-status {
				margin: 30rpx 0 50rpx;
				text-align: center;

				.success-icon {
					width: 120rpx;
					height: 120rpx;
					background: rgba(82, 196, 26, 0.1);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto 20rpx;

					.iconfont {
						font-size: 60rpx;
						color: #52c41a;
					}
				}

				.success-title {
					font-size: 36rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 16rpx;
					display: block;
				}

				.success-subtitle {
					font-size: 28rpx;
					color: #666;
					display: block;
					margin-bottom: 40rpx;
				}
			}

			.info-card {
				background: #f8f9fc;
				border-radius: 16rpx;
				padding: 30rpx;
				margin: 0 20rpx;

				.info-item {
					display: flex;
					flex-direction: column;
					padding: 20rpx 0;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

					&:last-child {
						border-bottom: none;
					}

					.label-wrap {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.label {
							font-size: 26rpx;
							color: #666;
						}

						.copy-btn {
							font-size: 22rpx;
							color: #006eff;
							background: rgba(0, 110, 255, 0.1);
							padding: 2rpx 12rpx;
							border-radius: 20rpx;
							margin-left: 16rpx;

							&:active {
								opacity: 0.8;
							}
						}
					}

					.value {
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
						word-break: break-all;
					}
				}
			}

			.tips {
				margin-top: 40rpx;

				.tips-text {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
</style>